<template name="appInstall">
	<section class="preferences-page preferences-page--new">
		{{> header sectionName="App_Installation" hideHelp=true fullpage=true}}
		{{#requiresPermission 'manage-apps'}}
			<div class="preferences-page__content">
				{{#if isInstalling}}
					{{> loading}}
				{{else}}
					<div class="rc-form-group rc-grid">
						<div class="rc-input rc-w50 padded">
							<label class="rc-input__label">
								<div class="rc-input__title">{{>icon icon='clip'}}{{_ "App_Url_to_Install_From"}}</div>
								<div class="rc-input__wrapper">
									<input type="text" class="rc-input__element" name="appPackageUrl" id="appPackage" placeholder="https://rocket.chat/apps/package.zip" value="{{appUrl}}" >
								</div>
							</label>
						</div>
						<div class="rc-input-file rc-w50 padded">
							<label class="rc-input-file__label">
								<div class="rc-input-file__title">{{>icon icon='clip'}}{{_ "App_Url_to_Install_From_File"}}</div>
								<div class="rc-input-file__wrapper">
									<div class="rc-input-file__name">
										{{appFile}}
									</div>
									<input type="file" accept=".zip" class="rc-input-file__element" name="appPackageUrl" id="upload-app" placeholder="https://rocket.chat/apps/package.zip">
									<label for='upload-app' class="rc-button rc-button-secondary install">{{_ "Browse_Files"}}</label>
								</div>
							</label>
							<!-- <input type="file" id="file" class="inputfile" onchange='uploadFile(this)'>
							<label for="file">
								<span id="file-name" class="file-box"></span>
								<span class="file-button">
								<i class="fa fa-upload" aria-hidden="true"></i>
								Select File
								</span>
							</label>


							<label class="rc-input__label">
								<div class="rc-input__title">{{>icon icon='clip'}}{{_ "App_Url_to_Install_From_File"}}</div>
								<div class="rc-input__wrapper">
								</div>
							</label> -->
							<!-- <div class="rc-select-avatar__list-item rc-tooltip js-select-app-upload" aria-label="{{_ "Upload_file" }}">
								<label class="rc-select-avatar__upload-label app" for="upload-app">
									{{> icon block="rc-select-avatar__upload-icon" icon="upload"}}
								</label>
								<input type="file" name="" value="" id="upload-app" style="display:none;">
							</div> -->
						</div>
					</div>
					<div class="rc-button-group">
						<button class="rc-button rc-button--secondary js-cancel">{{_ "Cancel"}}</button>
						<button class="rc-button rc-button--primary js-install" disabled='{{disabled}}'>
							{{#if isUpdating}}
								{{_ "Update"}}
							{{else}}
								{{_ "Install"}}
							{{/if}}
						</button>
					</div>
				{{/if}}
			</div>
		{{/requiresPermission}}
	</section>
</template>
